<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="岗位详情"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="item">
				<view class="item-line">
					<view class="item-title">
						{{detail.title}}
					</view>
					<view class="item-price">
						{{detail.isMianyi==1? '面议':Math.floor(detail.workSalary) + '元/天'}}
						
					</view>
				</view>
				<view class="item-line">
					<text>{{detail.workEducation=="不限"?"学历不限":detail.workEducation}}</text>
					<text>{{detail.workType=="不限"?"工作形式不限":detail.workType}}</text>
				</view>
				<view class="item-tag" v-if="detail.tip">
					<view v-for="tag in detail.tip.split(',')">{{tag}} </view>
					<view v-if=" detail.isDaijiao==1">带教服务</view>
				</view>
				<view class="item-bottom">
					<view class="item-date" v-if="detail.timeCreate">
						创建日期：{{detail.timeCreate.split(" ")[0]}}
					</view>
					<view class="item-status" :class="[getStatusClass(detail,'className')]" v-if="detail.status!=undefined">
						{{getStatusClass(detail,'')}}
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-title">基本信息</view>
				<view class="item-info-box">
					<view class="item-info">
						<text>岗位标签：{{detail.gangwei}}</text>
					</view>
					<view class="item-info">
						<text>岗位薪资：{{detail.isMianyi==1? '面议':'日薪'+Math.floor(detail.workSalary)}}</text>
					</view>
					<view class="item-info">
						<text>工作经验：{{detail.workExperience || '-'}}</text>
					</view>
					<view class="item-info">
						<text>工作形式：{{detail.workType || '-'}}</text>
					</view>
					<view class="item-info">
						<text>工作时间：{{detail.workTime || '-'}}</text>
					</view>
					<view class="item-info">
						<text>工作地址：{{`${detail.city?detail.city.replace('/市辖区',''):detail.city} ${detail.addr}`}}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-title">岗位要求</view>
				<view class="item-info-box">
					<view class="item-info contentVisible" :class="{'expanded': isExpandedJob }">
						<text>{{detail.need}}</text>
					</view>
				</view>
				<view class="item-more" :class="isExpandedJob? 'rorate':''" @click="expandedChange('isExpandedJob')">
					<van-icon name="arrow-down" color="#999"/>
				</view>
			</view>
			
			<view class="item">
				<view class="item-title">工作内容</view>
				<view class="item-info-box">
					<view class="item-info contentVisible" :class="{'expanded': isExpandedWork }">
						<text>{{detail.workCnt}}</text>
					</view>
				</view>
				<view class="item-more" :class="isExpandedWork? 'rorate':''" @click="expandedChange('isExpandedWork')">
					<van-icon name="arrow-down" color="#999"/>
				</view>
			</view>
		</view>
		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}" v-if="detail.status!=1">
			<view class="main-button-update" @click="update">
				<van-icon name="edit" color="#666"/>
				<text>
					编辑
				</text>
			</view>
			<view class="main-button-open" @click="togglePost" v-if="detail.status!=2 && detail.status!=3">
				{{detail.isOk=='1'? '关闭':'开放'}}招聘
			</view>
			<view class="main-button-remove" @click="remove" v-else-if="detail.status==2">
				删除
			</view>
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {getPostDetailToMine,getTogglePost,removeCompany} from "@/core/web-api/qiyeduan.js"
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				isExpandedJob: false,
				isExpandedWork:false,
				id:"",
				detail: {
				},
				bottomBtnHeight: uni.upx2px(90),
			}
		},
		methods: {
			remove(){
				uni.showModal({
					title:"温馨提示",
					content:"是否删除此岗位？",
					success:(val)=> {
						if(val.confirm){
							removeCompany({
								id: this.id
							}).then(res => {
								if (res.code == 20000) {
									uni.showToast({
										title:"删除成功",
										duration:1500
									})
									setTimeout(()=>{
										uni.navigateBack()
									},1500)
								}
							})
						}
					}
				})
				
			},
			expandedChange(type) {
				this[type] = !this[type]
			},
			
			/**
			 * 切换开放招聘和关闭招聘
			 */
			togglePost(){
				getTogglePost({id:this.id,isOk:this.detail.isOk=='0'?'1':'0'}).then(res=>{
					if(res.code==20000){
						this.detail.isOk = this.detail.isOk=='0'? '1':'0'
					}
				})
			},
			
			/**
			 * 跳转编辑
			 */
			update(){
				uni.navigateTo({
					url:"/pages/ucenter/qiyeduan/gangwei/add?id=" + this.id
				})
			},
			
			/**
			 * 获取详情
			 */
			getDetail(){
				getPostDetailToMine({id:this.id}).then(res=>{
					if(res.code==20000){
						this.detail = res.data.detail
					}
				})
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			getStatusClass() {
				return function(item, type) {
					let {
						status,
						isOk
					} = item;
					let dist = {
						0: {
							className: "publish",
							name: "已发布"
						},
						1: {
							className: "audio",
							name: "审核中"
						},
						3: {
							className: "",
							name: "草稿"
						},
						2: {
							className: "reject",
							name: "审核拒绝"
						}
					};
					if (status === 0 && isOk) {
						return type == "className" ? dist[0].className : dist[0].name
					} else if (status === 0 && !isOk) {
						return type == "className" ? "" : "已关闭"
					}
					return type == "className" ? (dist[status].className || "") : (dist[status].name || "")
				}
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			if(this.id){
				this.getDetail();
			}
		}
	}
</script>

<style scoped lang="less">
	.contentVisible {
		overflow: hidden;
		transition: all 2s ease;
		height: 200upx;
		/* 初始高度，设置为展示一半的内容 */
		padding: 0;
		text{
			display: -webkit-box;
			  -webkit-line-clamp: 5; /* 设置显示的行数 */
			  -webkit-box-orient: vertical;
			  overflow: hidden; /* 隐藏超出部分 */
		}
	}

	/* 扩展状态的样式 */
	.contentVisible.expanded {
		height: auto;
		text{
			display: -webkit-box;
			  -webkit-line-clamp: unset; /* 设置显示的行数 */
			  -webkit-box-orient: vertical;
			  overflow: hidden; /* 隐藏超出部分 */
		}
		/* 展开后自动调整高度 */
	}

	/* 可选的文本样式 */
	.text {
		margin: 0;
	}

	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;
			&-update{
				display: flex;
				align-items: center;
				justify-content: center;
				flex:1;
				color: #666666;
			}
			&-open {
				width: 477upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
			&-remove{
				width: 477upx;
				background-color: #ff0000;
				color: #ffffff;
				box-sizing: border-box;
			}
		}
	}

	.content {
		width: 100%;
		margin-top: 30upx;
	}

	.item {
		margin-bottom: 40upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 25upx 30upx 30upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		
		&-more{
			width: 100%;
			display: flex;
			justify-content: center;
			&.rorate{
				transform: rotate(180deg);
			}
		}

		&-line {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			&:last-child {
				margin-bottom: 0;
			}

			text {
				font-size: 26upx;
				color: #666666;
				display: block;
				height: 26upx;
				line-height: 26upx;

				&:nth-child(2) {
					padding-left: 10upx;
					margin-left: 10upx;
					border-left: 2upx solid #666;
				}
			}
		}

		&-title {
			flex: 1;
			font-size: 34upx;
			color: #000;
			font-weight: bold;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-price {
			font-size: 30upx;
			color: #0180ff;
		}

		&-tag {
			display: flex;
			flex-flow: wrap;
			margin-top: 15upx;

			view {
				font-size: 20upx;
				color: #333333;
				height: 38upx;
				padding: 0 14upx;
				border-radius: 19upx;
				background-color: #f6f6f6;
				margin-right: 20upx;
				line-height: 38upx;
			}
		}

		&-bottom {
			width: 100%;
			display: flex;
			margin-top: 25upx;
			padding: 30upx 0upx 0 0;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 2upx solid #f8f8f8;
		}

		&-date {
			font-size: 20upx;
			color: #999999;
		}

		&-status {
			font-size: 25upx;
			color: #999999;

			&.publish {
				color: #00cf7a;
			}

			&.audio {
				color: #fc637d;
			}
			&.reject{
				color: #ff0000;
			}
		}

		&-info {
			line-height: 1.5;

			&-box {
				margin-top: 20upx;
			}

			text {
				font-size: 26upx;
				color: #666666;
			}
		}
	}
</style>